<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bank</title>

    <script src="http://localhost:9019/js/jquery.min.js"></script>

<!--    <script src="http://localhost:9019/js/tongji.js" type="text/javascript>"></script>-->
    <script>
        //使用悬浮窗显示
        function showHuoZhu(){
            document.getElementById("HuoZhuDiv").hidden='';
            document.getElementById("HuoZhuDiv").display='block';
        }

        //使悬浮框消失
        function hiddenHuoZhu(){
            document.getElementById("HuoZhuDiv").hidden='hidden';
            document.getElementById("HuoZhuDiv").display='none';
        }
    </script>
</head>

<body>
    <form action="huozhuchaxun1.do">
        <table border="1">
            <tr><td>货主</td><td><input type="text" name="huozhu" id="huozhu" th:value="${session.huozhu}" onchange="showHuoZhu()"><br>
                <div hidden="hidden" id="HuoZhuDiv" display="none" style="background: aquamarine">
                    <table border="1" id="pro" style="border: #2aabd2">
                        <tr>
                            <td>客户ID</td>
                            <td>客户名称</td>
                            <td>客户手机</td>
                            <td>客户电话</td>
                        </tr>
                    </table>
                </div>
            </td></tr>

            <tr><th>仓库</th><th><select name="storeName" id="storeName"><option th:each="i:${session.stringList}" th:value="${i}" th:text="${i}">--请选择--</option></select></th></tr>
            <tr><th></th><th><button type="submit">开始盘点</button></th></tr>
        </table><br>
        每页显示条数<select name="pageRows" id="pageRows" onchange="change1(this.value)">
        <option th:each="a:${session.list1}" th:value="${a}" th:text="${a}" th:selected="${session.pageRows==a}"></option>
    </select>&nbsp;&nbsp;&nbsp;
        第<label th:text="${session.pageInfo1.getPageNum()}"></label>页
        <input type="hidden" th:value="${session.pageInfo1.getPageNum()}" id="pageNum">

    </form>
    <label th:if="${session.pageInfo1.size==0}" style="color: aquamarine">没有查到任何数据!请输入要查询的信息</label>
    <table border="1" th:if="${session.pageInfo1.size!=0}">
        <tr><td>仓库名称</td><td>货主</td><td>仓位</td><td>托盘</td><td>货物名称</td><td>货物规格</td><td>入库件数</td></tr>
        <tr th:each="every:${session.pageInfo1.getList()}">
            <td th:text="${every.storName}"></td>
            <td th:text="${every.custName}"></td>
            <td th:text="${every.siteID}"></td>
            <td th:text="${every.trayID}"></td>
            <td th:text="${every.detailsGoodsName}"></td>
            <td th:text="${every.detailsGoodsSpec}"></td>
            <td th:text="${every.detailsInput}"></td>
        </tr>
        <tr>
            <button th:value="${session.pageInfo1.getPageNum()>1?session.pageInfo1.getPageNum()-1:session.pageInfo1.getPageNum()}" onclick="nextpage(this.value)">上一页</button>
            <button th:value="${session.pageInfo1.getPageNum()<session.pageInfo1.getPages()?session.pageInfo1.getPageNum()+1:session.pageInfo1.getPageNum()}" onclick="nextpage(this.value)">下一页</button>
        </tr>
    </table>



<div id="copyright">
    版权区
</div>

</body>
    <script>
        //在悬浮窗的表格中插入货主信息
        $(function () {
            $("#huozhu").keyup(function () {
                $.ajax({
                    type: "get",
                    url: "selectCustomer.do",
                    data: "custName=" + $("#huozhu").val(),
                    success: function (data) {
                        $("#pro").html("");
                        $("#pro").append("<tr>\n"+
                            "                        <td>客户ID</td>\n" +
                            "                        <td>客户名称</td>\n" +
                            "                        <td>客户手机</td>\n" +
                            "                        <td>客户电话</td>\n" +
                            "           </tr>");
                        for(var i=0;i<data.length;i++){
                            $("#pro").append("<tr id='tr' onmouseout='change(tr)' onmouseover='over(tr)' onclick='check(\""+data[i].custTel+"\",\""+data[i].custName+"\")'>" +
                                "<td>"+data[i].custId+"</td>" +
                                "<td>"+data[i].custName+"</td>" +
                                "<td>"+data[i].custMobile+"</td>" +
                                "<td>"+data[i].custTel+"</td>" +
                                "</tr>")
                        }
                    }
                })
            })
        })
            function check(custTel,custName) {
                var need =custTel+":"+custName;
                //2 输入框的内容是你点击的div的内容
                $("#huozhu").val(need);
                //1 让下方table内容清空
                $("#pro").html("");
                hiddenHuoZhu();
            }
        function over(tr) {
            tr.style.backgroundColor="hsl(176,45%,43%)"
        }
        function change(tr) {
            tr.style.backgroundColor="white"
        }
        function change1(row) {
            var huozhu=$("#huozhu").val();
            var storeName=$("#storeName").val();
            var pageNum=$("#pageNum").val();
            window.location="huozhuchaxun1.do?pageRows="+row+"&pageNum="+pageNum+"&huozhu="+huozhu+"&storeName="+storeName;
            }
        function nextpage(page) {
            var huozhu=$("#huozhu").val();
            var storeName=$("#storeName").val();
            var pageRows=$("#pageRows").val();
            window.location="huozhuchaxun1.do?pageRows="+pageRows+"&pageNum="+page+"&huozhu="+huozhu+"&storeName="+storeName;
        }
    </script>
</html>
